<template>
  <div class="app">
    <van-pull-refresh
      v-model="refreshing"
      loosing-text="下拉刷新"
      @refresh="onRefresh"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="20"
        @load="onLoad"
      >
        <div class="main">
          <van-row class="row row-header" justify="center">
            <van-col :span="1">
              <div class="header">
                <span>#</span>
              </div>
            </van-col>
            <van-col :span="5">
              <div class="header">
                <span>{{ header.nameKey }}</span>
              </div>
            </van-col>
            <van-col :span="6">
              <div class="header">
                <span>{{ header.dateKey }}</span>
              </div>
            </van-col>
            <van-col :span="4">
              <div class="header">
                <span>{{ header.startKey }}</span>
              </div>
            </van-col>
            <van-col :span="4">
              <div class="header">
                <span>{{ header.endKey }}</span>
              </div>
            </van-col>
            <van-col :span="3">
              <div class="header">
                <span>操作</span>
              </div>
            </van-col>
          </van-row>
          <van-row
            v-for="(item, index) in data"
            :key="item"
            class="row"
            justify="center"
          >
            <van-col :span="1">
              <div class="column">
                <span>{{ 1 + index }}</span>
              </div>
            </van-col>
            <van-col :span="5">
              <div class="column">
                <span>{{ item[header.name] }}</span>
              </div>
            </van-col>
            <van-col :span="6">
              <div class="column">
                <span>{{ item.date }}</span>
              </div>
            </van-col>
            <van-col :span="4">
              <div class="column">
                <span>{{ item.startTime }}</span>
              </div>
            </van-col>
            <van-col :span="4">
              <div class="column">
                <span>{{ item.endTime }}</span>
              </div>
            </van-col>
            <van-col :span="3">
              <div class="column">
                <van-button
                  size="mini"
                  type="primary"
                  @click="handleClick(item)"
                >
                  查看
                </van-button>
              </div>
            </van-col>
          </van-row>
        </div>

        <!-- <vxe-table v-if="!loading" border="inner" size="mini" :data="data">
          <vxe-column type="seq" width="15"></vxe-column>
          <vxe-column :field="`${header.name}`" :title="`${header.nameKey}`" />
          <vxe-column :field="'date'" :title="`${header.dateKey}`" />
          <vxe-column :field="'startTime'" :title="`${header.startTimeKey}`" />
          <vxe-column :field="'endTime'" :title="`${header.endTimeKey}`" />
          <vxe-column :field="'action'" width="60">
            <template #default="{ row }">
              
            </template>
          </vxe-column>
        </vxe-table> -->
        <!-- <van-cell v-for="item in data" :key="item" title="item.counselorName" /> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  defineProps,
  watch,
  defineEmits,
  Ref,
  nextTick,
} from 'vue'
import { getServiceRecord, getData } from '/@/views/reserve/api'
import { useRoute, useRouter } from 'vue-router'

interface Emit {
  [key: string]: any
}

const route = useRoute()
const router = useRouter()
const props = defineProps<{ header: Record<string, any>; url: string }>()
const emit = defineEmits<{ (event: 'toClick', row: Emit): void }>()

let data: any = reactive([])
let current = ref(1)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const onLoad = async () => {
  if (refreshing.value) {
    refreshing.value = false
  }
  //   const list = await useList(current)
  let list = []

  await getData(props.url, current.value, 10).then((res) => {
    current.value++
    list = res.data.data.records
    list.map((item: Record<string, any>) => {
      item.date = item.startTime.substring(0, 10)
      item.startTime = item.startTime.substring(11, 16)
      item.endTime = item.endTime.substring(11, 16)
    })
    list.forEach((item: any) => {
      data.push(item)
    })

    loading.value = false
    if (data.length >= res.data.data.total) {
      finished.value = true
    }
  })
}

const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}

// nextTick(() => {
// onRefresh()
// })

const handleClick = (row: any) => {
  emit('toClick', row)
}

async function useList(current: Ref<number>) {
  let list: any[] = []
  await getData(props.url, current.value, 20).then((res) => {
    list = res.data.data.records
    list.map((item: Record<string, any>) => {
      item.date = item.startTime.substring(0, 10)
      item.startTime = item.startTime.substring(11, 16)
      item.endTime = item.endTime.substring(11, 16)
    })
  })

  return list
}
</script>

<style lang="less" scoped>
.app {
  /deep/.vxe-table--render-default .vxe-cell {
    padding-right: 0;
  }

  .main {
    background-color: white;
    padding-bottom: 10px;
  }

  .row {
    margin-top: 8px;
    padding-top: 5px;
    color: #606266;
    border-top: 1px solid #e8eef5;

    .header {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
    }

    .column {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
  }

  .row-header {
    margin-top: 1px;
    padding-top: 5px;
  }
}
</style>
